<template>
  <div id="root">
    <es-router-view />
  </div>
</template>

<script lang="ts">
import { ref, provide } from 'vue'
import { defineComponent } from '@vue/runtime-core'
import {
  ESLogLevel,
  useES,
  useESDevelop,
  useESDevice,
  useESLog,
  useESRuntime,
  ESNetworkInfo,
  useESNetwork,
  useESLocalStorage
} from '@extscreen/es3-core'
// import { ESPlayerLogLevel, useESPlayer, useESPlayerLog } from "@extscreen/es3-player";
// import { useGlobalApi, useMediaDataSource, useRequestManager } from "./api/UseApi";
import { useGlobalApi, useRequestManager } from './api/UseApi'
// import { useUserManager } from "./tools/user/useApi";
import BuildConfig from './build/BuildConfig'
// import { useLaunch } from "./tools/launch/useApi";
import { useESNativeRouter, useESRouter } from '@extscreen/es3-router'
import { useESPlayer } from '@extscreen/es3-player'
import { createESPlayerManager } from '@extscreen/es3-player-manager'
// import { userLoginHook } from './utils/user'

export default defineComponent({
  name: 'App',
  setup() {
    const log = useESLog()
    const es = useES()
    const develop = useESDevelop()
    const device = useESDevice()

    const runtime = useESRuntime()
    const player = useESPlayer()
    const router = useESRouter()
    // const nativeRouter = useESNativeRouter()
    // const launch = useLaunch()
    // const playerLog = useESPlayerLog()

    const localStorage = useESLocalStorage()
    const request = useRequestManager()
    const globalApi = useGlobalApi()
    // const mediaDataSource = useMediaDataSource()
    // const userManager = useUserManager()

    function onESCreate(app, params) {
      // 清空缓存
      localStorage.putString('user_token', '')
      localStorage.putString('userId', '')
      localStorage.putString('userAccount', '')
      localStorage.putString('mac', '')
      localStorage.putString('pageHistory', '') // 焦点

      // localStorage.putString('currentMedia', '')

      initESLog()
      // network.addListener(connectivityChangeListener)
      return (
        Promise.resolve()
          .then(() => request.init(es, develop, device, runtime, log, localStorage))
          .then(() => globalApi.init(request))
          // .then(() => mediaDataSource.init(request))
          // .then(() => userManager.init())
          // .then(() => launch.init(log, router, nativeRouter))
          .then(() => {
            return player.init({
              debug: true,
              display: {
                screenWidth: device.getScreenWidth(),
                screenHeight: device.getScreenHeight()
              },
              device: {
                deviceType: runtime.getRuntimeDeviceType() ?? ''
              }
            })
          })
      )
    }

    // const network = useESNetwork()
    // console.log('network', network.isNetworkConnected());
    // const isNetworkConnected = ref<boolean>(true)
    // const connectivityChangeListener = {
    //   onConnectivityChange(networkInfo: ESNetworkInfo | null) {
    //     isNetworkConnected.value = network.isNetworkConnected()
    //     if (isNetworkConnected.value) {
    //       router.back()
    //     } else {
    //       router.push({ name: 'network' })
    //     }
    //   }
    // }
    function initESLog() {
      if (BuildConfig.debug) {
        log.setMinimumLoggingLevel(ESLogLevel.DEBUG)
      } else {
        log.setMinimumLoggingLevel(ESLogLevel.WARN)
      }
    }

    return {
      onESCreate
    }
  }
})
</script>

<style scoped>
#root {
  width: 1920px;
  height: 1080px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
</style>
